<script setup>
import StudentCard from './StudentCard.vue';



</script>
<template>
    <div class="recruit-members">
        <div class="search-members">
            <div class="search-bar" style="margin-bottom: 20px;">
                <input type="text" :placeholder="'查找学生（输入学号/姓名）'" />
                <img src="/src/assets/images/student/search.svg" alt="Search" width="24">
            </div>
            <div class="student-card-container">

                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'1班'" :student-id="1"  style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'2班'" :student-id="2"   style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'3班'" :student-id="3"  style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'4班'" :student-id="4"  style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'4班'" :student-id="5"  style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'4班'" :student-id="6"  style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'4班'" :student-id="7"  style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'4班'" :student-id="8"  style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'4班'" :student-id="9"  style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'4班'" :student-id="10"  style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'4班'"  :student-id="11"  style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'4班'"  :student-id="12"  style="margin-bottom: 20px;" />
            </div>
        </div>
        <div class="split-line">

        </div>
        <div class="interested-in">
            <p>你可能感兴趣的同学</p>
            <div class="student-card-container">

                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'1班'" :student-id="1"  style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'2班'" :student-id="2"   style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'3班'" :student-id="3"  style="margin-bottom: 20px;" />
                <StudentCard :avatar-src="'/src/assets/images/student/avatar.svg'" :student-name="'梁朝伟'"
                    :student-major="'软件工程'" :student-class="'4班'" :student-id="4"  style="margin-bottom: 20px;" />
            </div>
        </div>
        
    </div>


</template>
<style scoped>
.recruit-members {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 493px;
}

.recruit-members>.search-members {
    width: 48%;

}

.recruit-members>.search-members>.search-bar {
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: center;
    background-color: #e9e9e9;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
}

.recruit-members>.search-members>.search-bar>input {
    width: 80%;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: Source Han Sans CN;
    padding: 10px 0;
    background-color: transparent;
}

.recruit-members>.search-members>.search-bar>img {
    display: block;
    cursor: pointer;
}

.recruit-members .student-card-container {
    display: flex;
    flex-wrap: wrap;
    height: 390px;
    overflow-y: auto;

}

.recruit-members>.split-line {
    height: 95%;
    border-width: 0 1px 0 1px;
    border-style: solid;
    border-color: rgba(112, 112, 112, 0.35);
    margin: 0 30px;
}

.recruit-members>.interested-in {
    width: 48%;
}

.recruit-members>.interested-in>p {
    font-family: Source Han Sans CN;
    font-size: 20px;
    color: #707070;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    margin-bottom: 20px;
}


</style>